<script>
    import {getTagList,getArticleList,changeOptions} from '../../vuex/actions'
    import indexImage from '../../assets/images/jingzhou.jpg'
    import Sidebar from './sidebar.vue'
    import Tags from './tags.vue'
    import Articles from './articles.vue'
    import Loadmore from './loadmore.vue'
    export default{
        computed:{
            indexImg(){
                return indexImage
            },
        },
        created(){
            this.changeOptions({'userId':'','isEdit':false})
            this.getTagList()
            this.getArticleList(this.options)
        },
        methods:{
            handleChange(options,isAdd=false){
              this.changeOptions(options)
              this.getArticleList(this.options, isAdd)
          }
        },
        components:{
            Sidebar,
            Tags,
            Articles,
            Loadmore
        },
        vuex:{
            getters:{
                tagList: ({tagList}) => tagList.items ,
                articleList: ({articleList}) => articleList.items,
                options: ({options}) => options.item,
                isMore: ({articleList}) => articleList.isMore,
                isFetching: ({articleList}) => articleList.isFetching
            },
            actions:{
                getTagList,
                getArticleList,
                changeOptions
            }
        }
    }
</script>

<template>
    <div class="container-fluid main-box">
        <div class="row">
            <Sidebar :index-img="indexImg"></Sidebar>
            <div class="col-sm-7 col-sm-offset-3 main-content">
                <Tags :tag-list="tagList" :options="options" :is-fetching="isFetching"></Tags>
                <Articles :article-list="articleList" :is-edit="options.isEdit"></Articles>
                <Loadmore v-if="articleList.length>0 && isMore" :options="options" :is-more="isMore" :is-fetching="isFetching"></Loadmore>
            </div>
        </div>
    </div>
</template>

<style>

</style>